<template>
  <div style="padding: 10px">
    <d-details
      :detailsConfig="detailsConfig"
      v-model="data"
      direction="vertical"
      :isColon="false"></d-details>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  // 模拟缓存字典数据
  const options = {
    fieldName: [
      { name: 'dict选项1', id: '1' },
      { name: 'dict选项2', id: '2' },
      { name: 'dict选项3', id: '3' }
    ]
  }
  localStorage.setItem('dictName', JSON.stringify(options))

  const data = ref({
    date: 1679624297000,
    name: '王小虎',
    sex: '1',
    dict: '2'
  })
  const detailsConfig = ref([
    { label: '日期', prop: 'date', config: { type: 'date' } },
    {
      label: '性别',
      prop: 'sex',
      config: {
        type: 'select',
        options: [
          { key: '男', v: '1' },
          { key: '女', v: '2' }
        ],
        label: 'key',
        value: 'v'
      }
    },
    {
      label: '字典',
      prop: 'dict',
      config: {
        type: 'dict',
        dict: 'dictName',
        field: 'fieldName',
        label: 'name',
        value: 'id',
        storage: 'localStorage'
      }
    }
  ])
</script>
